<template>
  <view>
    <view class="detail_info">
      <button
        class="button"
        v-if="userAddress.length === 0"
        @tap="getUserAdress"
      >
        选择地址
      </button>
      <view v-else class="addressInfo">
        <text class="address">
          {{ userAddress.provinceName }}{{ userAddress.cityName
          }}{{ userAddress.countyName }}{{ userAddress.detailInfo }}</text
        >
        <view class="info">
          <text class="user">{{ userAddress.userName }}</text>
          <text class="phone">{{ userAddress.telNumber }}</text>
        </view>
      </view>
    </view>
    <view class="gooodsList">
      <view class="gooods_item" v-for="item in cartList" :key="item.goods_id">
        <Goods :goodsInfo="item" v-if="item.goods_selected" />
        <view class="goods_num">X{{ item.goods_count }}</view>
      </view>
    </view>

    <view class="account">
      <text class="sum">合计：</text>
      <text class="price">{{ account }}</text>

      <text class="topay" @tap="toPay">去支付({{ goods_num }})</text>
    </view>
  </view>
</template>

<script>
import { starPay, getPayParams,payHistory ,checkPayStatus} from "@/api/pay";
import Goods from "@/components/goods";
export default {
  components: {
    Goods,
  },
  data() {
    return {
      userAddress: [],
      cartList: [],
      goods_num: 0,
    };
  },
  onLoad() {
    this.userAddress = uni.getStorageSync("userAddress") || [];
    this.cartList = uni.getStorageSync("cartList") || [];
    console.log("pay page");
  },
  computed: {
    account() {
      let sum = 0;
      let index = 0;
      const res = this.cartList.findIndex((item) => item.goods_selected);
      this.cartList.forEach((item) => {
        if (item.goods_selected) {
          sum += item.goods_price * item.goods_count;
          index++;
        }
      });
      this.goods_num = index;
      return sum;
    },
  },
  methods: {
    getUserAdress() {
      uni.chooseAddress({
        success: (res) => {
          this.userAddress = res;
          uni.setStorageSync("userAddress", res);
        },
      });
    },
    async toPay() {
      console.log(this.cartList);
      const goods = this.cartList.map((item) => {
        return {
          goods_id: item.goods_id,
          goods_number: item.goods_count,
          goods_price: item.goods_price,
        };
      });
      const token = uni.getStorageSync('token')
      if (this.userAddress && token) {
        const { detailInfo, countyName, cityName, provinceName} = this.userAddress;
        const consignee_addr =detailInfo + countyName + cityName + provinceName;
        const order_price = this.account;
        const { order_number } = (await starPay({order_price,consignee_addr,goods})).data.message;

          const {pay} = (await getPayParams({order_number})).data.message
          console.log(pay, "支付参数");
          try {
            const res =  await wx.requestPayment(pay)
            
            console.log(res,'支付结果');
          const payStatusResult =   await  checkPayStatus({order_number})
          console.log(payStatusResult,'支付status');
          } catch (error) {
            console.log(error);
            uni.showToast({
              title: '支付失败',
              icon:'none',
              duration: 2000
            });
          }
       
      }else{
        uni.showToast({
          title: '请登录',
          icon:'none',
          duration: 1000
        });
      }
    },
  },
};
</script>

<style lang="less" >
page {
  background-color: #f9f9f9;
}
.detail_info {
  margin-top: 20rpx;
  height: 187rpx;
  width: 712rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .button {
    width: 304rpx;
    height: 90rpx;
    border-radius: 45rpx;
    border: 1px solid var(--themeColor);
    background-color: #fff;
  }
}
.addressInfo {
  padding: 20rpx 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .address {
    font-family: "PingFangSC-Medium";
    font-size: 36rpx;
    // color: #ffffff;
    letter-spacing: 0;
  }
  .info {
    margin-top: 20rpx;
    font-size: 30rpx;
    color: rgb(104, 103, 103);
    .user {
      margin-right: 50rpx;
    }
  }
}

.gooods_item {
  position: relative;
  .goods_num {
    position: absolute;
    right: 20rpx;
    bottom: 0;
  }
}
.account {
  height: 88rpx;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  border-top: 2px solid #e2e2e2;
  background-color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  // border-top: #e2e2e2;

  .sum {
    margin-left: 60rpx;
    font-size: 30rpx;
    color: #ccc;
  }
  .price {
    min-width: 200rpx;
    font-weight: 700;
    background-color: #fff;
  }
  .topay {
    margin-left: 100rpx;
    font-size: 30rpx;
    color: #fff;
    width: 25%;
    height: 52rpx;
    background-color: var(--themeColor);
    font-size: 30rpx;
    line-height: 52rpx;
    border-radius: 26rpx;
    text-align: center;
  }
}
</style>